<template>
  <div class="register">
    <div class="body">
      <div class="top"></div>
      <div class="left">
        <img class="left-img" src="@/assets/img/register.jpg">
      </div>
      <div class="right">
        <div class="content">
          <div class="loginend">
            <div class="title">用户注册</div>
            <form>
              <input type="text" v-model="iphone" placeholder="请输入11位手机号">
              <div class="verififcation">
                <input class="ver-input" v-model="code" type="text" placeholder="请输入4位验证码" >
                <input v-show="!epmty" :class="{active: sendcode, 'begin': codein, 'ver-send': funikm}" :disabled="!send" type="button" :value="codetext" @click="sendCode" v-bind="teSting">
                <input type="button" class="ver-send" :value="codetext" v-show="epmty" @click="epmtyCode">
              </div>
              <input type="passwords" v-model="password"  placeholder="请输入8-12位密码">
              <input type="button" :disabled="!isregist" :class="{regid_active: sendregis, 'regis_begin': regisin}" class="regis"  value="注册" v-bind:="minitor">
            </form>
            <div class="reged">已有找地网账户
              <router-link class="reg" to="/login">立即登录</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Loginend',
  data () {
    return {
      iphone: '',
      code: '',
      password: '',
      isregist: false,
      sendregis: true,
      regisin: false,
      codetext: '发送验证码',
      send: true,
      // 验证码样式
      sendcode: true,
      codein: false,
      funikm: true,
      epmty: true,
      iphones: ''
    }
  },
  // 发送验证码
  methods: {
    sendCode () {
      var that = this
      var countdown = 60
      codetime()
      function codetime () {
        if (countdown === 0) {
          that.codetext = '发送验证码'
          countdown = 60
          that.send = true
          that.codein = false
          that.sendcode= true
          return
        } else {
          countdown --
          that.codetext = '' + countdown + '秒后重发'
          that.send = false
          that.codein = true
          that.sendcode = false
        }
        setTimeout(function () {
          codetime()
        }, 1000)
      }
    },
    epmtyCode () {
      this.iphones = '手机号码不正确'
      this.showToast()
    },
    showToast () {
      this.$popups(this.iphones)
    }
  },
  // 计算属性试试监听data里的数据变化
  computed: {
    minitor () {
      if (this.iphone && this.code && this.password !== '') {
        this.isregist = true
        this.sendregis = false
        this.regisin = true
      } else {
        this.isregist = false
        this.sendregis = true
        this.regisin = false
      }
    },
    // 验证手机号码是否正确
    teSting() {
      if(!(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(this.iphone))) {
        console.log('手机号码不正确')
        this.send = false
        this.epmty = true
      } else {
        console.log('手机号码正确')
        this.send = true
        this.epmty = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  input
    display: block
    width: 90%
    height: 40px
    margin: 0 auto
    margin-bottom: 30px
    line-height: 40px
    font-size: 15px
    color: #999
    border-radius: 3px
    border: 1px solid #999
  .register
    width: 100%
    background: #eee
    .body
      width: 1280px
      height: 900px
      margin: 0 auto
      .top
          width: 1000px
          height: 100px
      .left
        width: 580px
        height: 500px
        float:left
        .left-img
          width: 580px
          height: 500px
      .right
        width: 700px
        height: 500px
        float:left
        .content
          width: 700px
          height: 500px
          .loginend
            width: 375px
            height: 500px
            background: #fff
          .verififcation
            display: flex
            .ver-input
              width:45%
              border-top-right-radius: 0
              border-bottom-right-radius: 0
              margin-left: 5%
            .ver-send
              width:45%
              height:42px
              border-left: 0
              margin-left: -20px
              border-top-left-radius: 0
              border-bottom-left-radius: 0
              border: 0
              background:#00bcd4
              color: #fff
            .active
              background: #00bcd4
            .begin
              background: #909090
          .regis
            border: 0
            font-size: 18px
            color: #fff
            border-radius: 20px
          .regid_active
            background: #00bcd4
          .regis_begin
            background: #02bf03
          .title
            width: 90%
            height: 80px
            margin: 0 auto
            line-height: 120px
            font-size: 18px
            font-weight: bold
            border-bottom: 1px solid #999
            margin-bottom: 40px
          .reged
            width: 90%
            height: 100px
            line-height: 100px
            font-size: 16px
            margin: 0 auto
            text-align: center
</style>
